<template>
	<view class="content">
		<view class="header">
			<p>火车票预订 <span>
					便捷购票 ，服务您的每一次出行</span></p>
		</view>
		<view class="main">
			<view>
				<span v-if="kg" @click="mapLeft"><input type="text" v-model="remen"></span>
				<span v-else @click="mapLeft"><input type="text" v-model="mudidi"></span>
				<span @click="switch11">
					<image src="/static/转换.png" mode=""></image>
				</span>
				<span v-if="kg" @click="map"><input type="text" v-model="mudidi"></span>
				<span v-else @click="map"><input type="text" v-model="remen"></span>
			</view>
			<!-- 	日历 -->
			<view>
				<p @click='open'>{{date}}</p>
			</view>
			<view>
				<button @click="queryList">查询</button>
			</view>
			<view>
				<span> <span v-if="kg">{{remen}}</span>
					<span v-else>{{mudidi}}</span>
					-
					<span v-if="kg">{{mudidi}}</span>
					<span v-else>{{remen}}</span>
				</span>
				<span>清除历史</span>
			</view>
		</view>
		<view class="body">
			<swiper circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper">
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/旅游1.png"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/旅游2.png"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<scroll-view class="footer" scroll-y>
			<view class="nav">
				<span>出行快讯</span>

				<span @click='more'>更多 ></span>
			</view>
			<view class="footerList">
				<dl v-for="(item,index) in datalist" :key="item.index" @click='()=>redirectToDetail(item.index)'>
					<dt>{{item.index}}</dt>
					<view class="dcl">
						<dd>{{item.title}}</dd>
						<dd><span>{{item.from}}</span><span>{{item.date}}</span></dd>
					</view>
					<dd><img :src="item.imgSrc" alt=""></dd>
				</dl>
			</view>
		</scroll-view>
		<u-popup :show="show" @close="close" @open="open">
			<view>
				<u-calendar :show="show1" :mode="mode" @confirm="confirm"></u-calendar>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const getlist = require('../../data/travelInfo.json')
	const chooseLocation = requirePlugin('chooseLocation');
	export default {
		data() {
			return {
				mapid: 3,
				kg: false,
				remen: '北京',
				mudidi: '西藏',
				date: '2023-4-22',
				datalist: [],
				show: false,
				show1: true,
				mode: 'single'
			}
		},
		onShow() {
			if (this.mapid == 1) {
				if (this.kg != false) {
					const location = chooseLocation.getLocation(); // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
					this.remen = location.city
					this.mapid = 3
				} else {
					const location = chooseLocation.getLocation(); // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
					this.mudidi = location.city
					this.mapid = 3
				}

			} else if (this.mapid == 2) {
				if (this.kg != false) {
					const location = chooseLocation.getLocation(); // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
					this.mudidi = location.city
					this.mapid = 3
				} else {
					const location = chooseLocation.getLocation(); // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
					this.remen = location.city
					this.mapid = 3
				}
			} else {

			}
		},

		methods: {
			map() {
				this.mapid = 2;
				const key = 'YQCBZ-F3Y3N-A5NF2-SC2D6-QWO6O-JIBOC'; //使用在腾讯位置服务申请的key
				const referer = 'abc'; //调用插件的app的名称
				const location = JSON.stringify({
					latitude: 39.89631551,
					longitude: 116.323459711
				});
				const category = '生活服务,娱乐休闲';

				wx.navigateTo({
					url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' +
						location + '&category=' + category
				})
			},
			mapLeft() {
				this.mapid = 1;
				const key = 'YQCBZ-F3Y3N-A5NF2-SC2D6-QWO6O-JIBOC'; //使用在腾讯位置服务申请的key
				const referer = 'abc'; //调用插件的app的名称
				const location = JSON.stringify({
					latitude: 39.89631551,
					longitude: 116.323459711
				});
				const category = '生活服务,娱乐休闲';

				wx.navigateTo({
					url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' +
						location + '&category=' + category
				})
			},
			redirectToDetail(index) {
				console.log(index);
				// 跳转到详情页，并传递商品id
				uni.navigateTo({
					url: '/pages/Detail/Detail?id=' + index
				});
			},
			more() {
				uni.navigateTo({
					url: '/pages/More lists/More lists'
				})
			},
			open() {
				this.show = true
				this.show1 = true
			},
			close() {
				this.show = false
			},
			//开关取反
			switch11() {
				this.kg = !this.kg;
			},
			gbu() {
				// this.remen = this.remen;
			},
			gcd() {
				// this.mudidi = this.mudidi;
			},
			confirm(e) {
				this.show1 = false
				this.show = false
				this.date = e[0]
			},
			//查询事件
			queryList() {
				let _this=this
				//跳转路由传参
				let token = uni.getStorageSync('token')
				if (token) {
					//获取touken失效时间传给后端进行判断
					let Dow = decodeURIComponent(token)
					let tokenDow = JSON.parse(Dow)
                   //调用登录
                   uni.request({
                   	url: 'http://localhost:8000/api/denglu',
                   	method: 'POST',
                   	data: {
                   		msg: tokenDow
                   	},
					success(res) {
						//判断token是否失效
						if(res.data.message=='已失效'){
							//删除本地token
							uni.clearStorageSync('token')
							//跳转登录从新获取token
							uni.navigateTo({
								url: '/pages/Login/Login',
							});
						}else{
							//获取数据
								uni.navigateTo({
									url: '/pages/Query/Query?obj=' +
										`${_this.remen},${_this.mudidi},${_this.date},${_this.kg==false? '1':'2'}`,
								});
						}
					}})

				} else {
					uni.navigateTo({
						url: "/pages/Login/Login"
					})
				}

			}
		},
		mounted() {
			this.mapid = 3;
			this.datalist = getlist;
		}
	}
</script>

<style lang="scss">
	.footer {
		height: 21.5vh;
		width: 96vw;
		margin-left: 2vw;
		border-radius: 20rpx 20rpx 0 0;
		background-color: #fff;
		margin-top: 20rpx;

		.footerList {
			width: 100%;

			dl {
				position: relative;
				height: 200rpx;
				width: 100%;
				border-bottom: 2rpx solid #ccc;

				dt {
					float: left;
					width: 80rpx;
					height: 180rpx;
					line-height: 70rpx;
					color: red;
					text-align: center;
				}

				.dcl {
					dd:nth-child(1) {
						width: 440rpx;
						font-size: 35rpx;
						padding-top: 10rpx;
					}

					dd:nth-child(2) {
						width: 500rpx;
						padding-top: 20rpx;
						font-size: 24rpx;
						color: #a4a4a4;
						float: left;

						span:nth-child(2) {
							margin-left: 20rpx;
						}
					}
				}


				dd:nth-child(3) {
					position: absolute;
					top: 24rpx;
					right: 60rpx;
					float: left;

					img {
						width: 200rpx;
						height: 120rpx;
					}
				}
			}
		}

		.nav {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 8vh;
			border-bottom: 2rpx solid #e8e8e8;

			span {
				padding: 0 40rpx;
			}

			span:nth-child(1) {
				font-weight: 800;
			}

			span:nth-child(2) {
				font-size: 30rpx;
				color: #b6b6b6;
			}
		}
	}

	.body {
		background-color: #fff;
		width: 96vw;
		margin-left: 2vw;
		border-radius: 20rpx;
		height: 180rpx;
		margin-top: 20rpx;

		.swiper {
			width: 100vw;
			height: 180rpx;

			.swiper-item {
				width: 100%;
				height: 100%;

				image {
					height: 100%;
					width: 96vw;
					border-radius: 20rpx;
				}
			}

		}
	}

	.content {
		width: 100vw;
		height: 100vh;
		background-color: rgb(239, 239, 239);
	}

	.header {
		width: 100vw;
		height: 45vh;
		background-color: #00acbd;
		border-bottom-right-radius: 40rpx;
		border-bottom-left-radius: 40rpx;

		p {
			padding-top: 170rpx;
			text-indent: 1.7em;
			font-size: 45rpx;
			color: #fff;

			span {
				display: block;
				font-size: 34rpx;
				padding-top: 40rpx;
			}
		}
	}

	.main {
		width: 96vw;
		height: 30vh;
		background-color: #fff;
		margin-left: 2vw;
		border-radius: 20rpx;
		margin-top: -180rpx;

		view {
			margin-left: 5%;
		}

		input {
			width: 100rpx;
		}

		view:nth-child(1) {
			margin-top: -30rpx;
			width: 90%;
			height: 120rpx;
			display: flex;
			align-items: center;

			image {
				width: 58rpx;
				height: 58rpx;
			}

			span {
				display: inline-block;
				width: 180rpx;
			}

			span:nth-child(1) {
				margin-left: 20rpx;
			}

			span:nth-child(2) {
				margin: 0 180rpx;

			}
		}

		view:nth-child(2) {
			margin-left: 10rpx;
		}

		button {
			width: 650rpx;
			margin-left: -0rpx;
			height: 90rpx;
			line-height: 90rpx;
			font-size: 34rpx;
			color: #fff;
			background-color: rgb(255, 122, 0);
			border-radius: 40rpx;
		}

		view:nth-child(4) {
			width: 644rpx;
			font-size: 28rpx;
			color: #a4a4a4;
			display: flex;
			align-items: center;
			margin-top: 14rpx;
			justify-content: space-between;
		}
	}
</style>